<template>
  <div class="topLocation">货物信息管理 / 货物图表</div>
  <div id="main" style="width: 1000px; height: 800px; margin: 10px auto;"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';

// 用来接收后端返回的数据
const categoryData = ref([]);

// 在组件挂载时请求数据
onMounted(() => {
  axios.get('http://localhost:8080/goods/countByCategory')
      .then(res => {
        categoryData.value = res.data;  // 获取类别统计数据
        renderChart();  // 渲染图表
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
});

// 渲染图表的函数
const renderChart = () => {
  const myChart = echarts.init(document.getElementById('main'));

  // 处理数据，将其转换为适合饼图的格式
  const pieData = categoryData.value.map(item => ({
    value: item.totalStock,  // 假设后端返回的是 'totalStock'（库存总数）
    name: item.category      // 类别名称
  }));

  // 配置饼图的选项
  const option = {
    title: {
      text: '货物类别数量分布',
      left: 'center',
      top: '20px',
      textStyle: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#333'  // 标题颜色
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      backgroundColor: 'rgba(0, 0, 0, 0.7)',  // 设置tooltip背景颜色
      textStyle: {
        color: '#fff'  // tooltip文字颜色
      }
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: '30%',
      data: categoryData.value.map(item => item.category),
      textStyle: {
        fontSize: 14,
        color: '#333'  // 图例文字颜色
      }
    },
    series: [
      {
        name: '类别分布',
        type: 'pie',
        radius: '50%', // 设置为圆形饼图
        center: ['50%', '40%'],  // 饼图居中
        data: pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        itemStyle: {
          // 添加渐变色
          normal: {
            color: (params) => {
              const colors = ['#ff7f50', '#87cefa', '#32cd32', '#ff6347', '#8a2be2', '#dc143c', '#ff1493', '#ff4500', '#da70d6', '#ff8c00'];
              return colors[params.dataIndex % colors.length];  // 根据数据索引循环使用渐变色
            }
          }
        },
        label: {
          normal: {
            show: true,
            position: 'outside',  // 标签显示在外部
            formatter: '{b}: {c} ({d}%)',  // 标签显示格式
            textStyle: {
              fontSize: 14,
              color: '#333'
            }
          }
        },
        animationType: 'scale',  // 添加动画效果
        animationEasing: 'elasticOut',  // 动画弹性效果
        animationDuration: 1500  // 动画持续时间
      }
    ]
  };

  myChart.setOption(option);
};
</script>

<style scoped>
.topLocation {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  padding: 10px;
  border-bottom: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
  margin-top: 20px;
}
</style>
